摘要
昨天（Day 6）我們完成了「歷史回顧」功能，使用者能看到所有紀錄。
但有時候我們會想刪掉特定的一筆，例如：

• 測試用的假資料
• 打錯字的紀錄
• 已經不想保留的項目

今天就來完成「單筆刪除（Delete）」功能。

為什麼要能刪除？

• 掌控感：去除錯誤／不需要的紀錄，讓清單保持乾淨。
• 實務必備：待辦、留言板、日誌系統都離不開刪除。

核心流程

1. 在每筆紀錄後加「刪除」按鈕：用 id 傳遞，避免 index 誤刪。
2. 以 id 過濾（filter）產生新陣列寫回：不可變性（immutability）方便追蹤修改紀錄。
3. 刪除後重新 render，讓畫面立即更新。
4. 監聽 storage 事件，多分頁自動同步畫面。

實作步驟

JS：

// ---- 渲染清單（按 createdAt 新到舊），用 data-id 帶主鍵 ----
function renderHistory() {
  const el = document.getElementById('historyList');
  const records = readRecords().slice().sort((a, b) => b.createdAt - a.createdAt);

  el.innerHTML = records.length
    ? records.map(r => `
        <li>
          [${new Date(r.createdAt).toLocaleString()}] ${r.task} — ${r.reason} ｜「${r.quote}」
          <button class="btn-delete" data-id="${r.id}">刪除</button>
        </li>
      `).join('')
    : '<li class="muted">尚無紀錄</li>';
}

// ---- 單筆刪除（不可變性）：過濾掉指定 id ----
function deleteRecordById(id) {
  const list = readRecords();
  const exists = list.some(r => r.id === id);
  if (!exists) return false; // 可能已被其他分頁刪掉

  const next = list.filter(r => r.id !== id);
  writeRecords(next);
  return true;
}

// ---- 事件委派：監聽 <ul> click，判斷是否點到刪除按鈕 ----
document.getElementById('historyList').addEventListener('click', (e) => {
  const btn = e.target.closest('button.btn-delete');
  if (!btn) return; // 點到的是其他位置
  const id = btn.dataset.id;
  const ok = deleteRecordById(id);
  if (!ok) {
    // 錯誤情境：可能另一分頁已刪除或 LocalStorage 被改動
    alert('找不到這筆紀錄，可能已被移除或在其他分頁修改。');
  }
  renderHistory();
});

// ---- 多分頁同步：其他分頁變更 STORAGE_KEY 時自動重繪 ----
window.addEventListener('storage', (e) => {
  if (e.key === STORAGE_KEY) {
    renderHistory();
  }
});

// ---- 初次載入 ----
renderHistory();

驗證

1. 新增 3 筆資料。
2. 點中間那筆後的「刪除」 → 清單重新渲染，該筆資料消失。
3. 重整頁面 → 確認 LocalStorage 裡也同步更新。
4. 如果嘗試刪除不存在的 id → 跳出「找不到紀錄」的提示。